<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~   http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
-->

<app-help-massage-show
  [help_massage_content]="'monitor.app.' + monitor.app + '.help' | i18n"
  [module_name]="('monitors.edit' | i18n) + ' ' + ('monitor.app.' + monitor.app | i18n) + ' ' + ('monitor' | i18n)"
  [guild_link]="'monitor.app.' + monitor.app + '.helpLink' | i18n"
  [icon_name]="'edit'"
></app-help-massage-show>
<nz-divider></nz-divider>

<nz-spin [nzSpinning]="isSpinning" [nzTip]="spinningTip" nzSize="large">
  <div class="-inner-content">
    <form nz-form #editForm="ngForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="host" nzRequired="true" [nzTooltipTitle]="'monitor.host.tip' | i18n">
          {{ hostName ? hostName : ('monitor.host' | i18n) }}
        </nz-form-label>
        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="monitor.host" nz-input name="host" type="text" id="host" required [placeholder]="'monitor.host.tip' | i18n" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true" [nzTooltipTitle]="'monitor.name.tip' | i18n">
          {{ 'monitor.name' | i18n }}
        </nz-form-label>
        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="monitor.name" nz-input required name="name" type="text" id="name" [placeholder]="'monitor.name.tip' | i18n" />
        </nz-form-control>
      </nz-form-item>

      <ng-container *ngFor="let paramDefine of paramDefines; let i = index">
        <nz-form-item *ngIf="params[i].display">
          <nz-form-label
            *ngIf="paramDefine.field !== 'host' && (paramDefine.type === 'text' || paramDefine.type === 'array')"
            nzSpan="7"
            [nzRequired]="paramDefine.required"
            [nzFor]="paramDefine.field"
            >{{ paramDefine.name }}
          </nz-form-label>
          <nz-form-control
            *ngIf="paramDefine.field !== 'host' && (paramDefine.type === 'text' || paramDefine.type === 'array')"
            nzSpan="8"
            [nzErrorTip]="'validation.required' | i18n"
          >
            <input
              nz-input
              [(ngModel)]="params[i].paramValue"
              [required]="paramDefine.required"
              [name]="paramDefine.field"
              [type]="paramDefine.type"
              [id]="paramDefine.field"
              [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
            />
          </nz-form-control>

          <nz-form-label *ngIf="paramDefine.type === 'textarea'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
            >{{ paramDefine.name }}
          </nz-form-label>
          <nz-form-control *ngIf="paramDefine.type === 'textarea'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
            <textarea
              nz-input
              [(ngModel)]="params[i].paramValue"
              [required]="paramDefine.required"
              [name]="paramDefine.field"
              [id]="paramDefine.field"
              [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
              rows="8"
            ></textarea>
          </nz-form-control>

          <nz-form-label *ngIf="paramDefine.type === 'password'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
            >{{ paramDefine.name }}
          </nz-form-label>
          <nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
            <nz-input-group [nzSuffix]="suffixTemplate" style="width: 100%">
              <input
                [type]="passwordVisible ? 'text' : 'password'"
                nz-input
                placeholder="input password"
                [required]="paramDefine.required"
                [(ngModel)]="params[i].paramValue"
                [id]="paramDefine.field"
                [name]="paramDefine.field"
                [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
              />
            </nz-input-group>
            <ng-template #suffixTemplate>
              <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
            </ng-template>
          </nz-form-control>

          <nz-form-label *ngIf="paramDefine.type === 'number'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
            >{{ paramDefine.name }}
          </nz-form-label>
          <nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
            <nz-input-number
              [(ngModel)]="params[i].paramValue"
              [required]="paramDefine.required"
              [nzMin]="-1000"
              [nzMax]="65535"
              [nzStep]="1"
              [nzPlaceHolder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
              [name]="paramDefine.field"
              [id]="paramDefine.field"
            ></nz-input-number>
          </nz-form-control>

          <nz-form-label *ngIf="paramDefine.type === 'boolean'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
            >{{ paramDefine.name }}
          </nz-form-label>
          <nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
            <nz-switch
              [(ngModel)]="params[i].paramValue"
              (ngModelChange)="onParamBooleanChanged($event, paramDefine.field)"
              [required]="paramDefine.required"
              [name]="paramDefine.field"
              [id]="paramDefine.field"
            ></nz-switch>
          </nz-form-control>

          <nz-form-label *ngIf="paramDefine.type === 'radio'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
            >{{ paramDefine.name }}
          </nz-form-label>
          <nz-form-control *ngIf="paramDefine.type === 'radio'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
            <nz-radio-group
              [(ngModel)]="params[i].paramValue"
              [required]="paramDefine.required"
              nzButtonStyle="solid"
              (ngModelChange)="onDependChanged($event, paramDefine.field)"
              [name]="paramDefine.field"
              [id]="paramDefine.field"
            >
              <label nz-radio-button [nzValue]="optionItem.value" *ngFor="let optionItem of paramDefine.options">
                {{ optionItem.label }}
              </label>
            </nz-radio-group>
          </nz-form-control>

          <nz-form-label *ngIf="paramDefine.type === 'key-value'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
            >{{ paramDefine.name }}
          </nz-form-label>
          <nz-form-control *ngIf="paramDefine.type === 'key-value'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
            <app-key-value-input
              [(value)]="params[i].paramValue"
              [id]="paramDefine.field"
              keyAlias="Header Name"
              valueAlias="Header Value"
            ></app-key-value-input>
          </nz-form-control>

          <nz-form-label
            *ngIf="paramDefine.type === 'metrics-field'"
            nzSpan="7"
            [nzRequired]="paramDefine.required"
            [nzFor]="paramDefine.field"
            >{{ paramDefine.name }}
          </nz-form-label>
          <nz-form-control *ngIf="paramDefine.type === 'metrics-field'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
            <app-metrics-field-input
              [(value)]="params[i].paramValue"
              [id]="paramDefine.field"
              [FieldAlias]="'Field'"
              [UnitAlias]="'Unit'"
              [TypeAlias]="'Type'"
            ></app-metrics-field-input>
          </nz-form-control>
        </nz-form-item>
      </ng-container>

      <nz-collapse [nzGhost]="true" style="margin-bottom: 16px">
        <nz-collapse-panel [nzHeader]="extraColHeader" [nzShowArrow]="false">
          <ng-container *ngFor="let paramDefine of advancedParamDefines; let i = index">
            <nz-form-item *ngIf="advancedParams[i].display">
              <nz-form-label
                *ngIf="paramDefine.field !== 'host' && (paramDefine.type === 'text' || paramDefine.type === 'array')"
                nzSpan="7"
                [nzRequired]="paramDefine.required"
                [nzFor]="paramDefine.field"
                >{{ paramDefine.name }}
              </nz-form-label>
              <nz-form-control
                *ngIf="paramDefine.field !== 'host' && (paramDefine.type === 'text' || paramDefine.type === 'array')"
                nzSpan="8"
                [nzErrorTip]="'validation.required' | i18n"
              >
                <input
                  nz-input
                  [(ngModel)]="advancedParams[i].paramValue"
                  [required]="paramDefine.required"
                  [name]="paramDefine.field"
                  [type]="paramDefine.type"
                  [id]="paramDefine.field"
                  [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
                />
              </nz-form-control>

              <nz-form-label
                *ngIf="paramDefine.type === 'textarea'"
                nzSpan="7"
                [nzRequired]="paramDefine.required"
                [nzFor]="paramDefine.field"
                >{{ paramDefine.name }}
              </nz-form-label>
              <nz-form-control *ngIf="paramDefine.type === 'textarea'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
                <textarea
                  nz-input
                  [(ngModel)]="advancedParams[i].paramValue"
                  [required]="paramDefine.required"
                  [name]="paramDefine.field"
                  [id]="paramDefine.field"
                  [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
                  rows="8"
                ></textarea>
              </nz-form-control>

              <nz-form-label
                *ngIf="paramDefine.type === 'password'"
                nzSpan="7"
                [nzRequired]="paramDefine.required"
                [nzFor]="paramDefine.field"
                >{{ paramDefine.name }}
              </nz-form-label>
              <nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
                <nz-input-group [nzSuffix]="suffixTemplate" style="width: 100%">
                  <input
                    [type]="passwordVisible ? 'text' : 'password'"
                    nz-input
                    placeholder="input password"
                    [required]="paramDefine.required"
                    [(ngModel)]="advancedParams[i].paramValue"
                    [id]="paramDefine.field"
                    [name]="paramDefine.field"
                    [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
                  />
                </nz-input-group>
                <ng-template #suffixTemplate>
                  <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
                </ng-template>
              </nz-form-control>

              <nz-form-label
                *ngIf="paramDefine.type === 'number'"
                nzSpan="7"
                [nzRequired]="paramDefine.required"
                [nzFor]="paramDefine.field"
                >{{ paramDefine.name }}
              </nz-form-label>
              <nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
                <nz-input-number
                  [(ngModel)]="advancedParams[i].paramValue"
                  [required]="paramDefine.required"
                  [nzMin]="-1000"
                  [nzMax]="65535"
                  [nzStep]="1"
                  [nzPlaceHolder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
                  [name]="paramDefine.field"
                  [id]="paramDefine.field"
                ></nz-input-number>
              </nz-form-control>

              <nz-form-label
                *ngIf="paramDefine.type === 'boolean'"
                nzSpan="7"
                [nzRequired]="paramDefine.required"
                [nzFor]="paramDefine.field"
                >{{ paramDefine.name }}
              </nz-form-label>
              <nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
                <nz-switch
                  [(ngModel)]="advancedParams[i].paramValue"
                  [required]="paramDefine.required"
                  [name]="paramDefine.field"
                  [id]="paramDefine.field"
                ></nz-switch>
              </nz-form-control>

              <nz-form-label *ngIf="paramDefine.type === 'radio'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
                >{{ paramDefine.name }}
              </nz-form-label>
              <nz-form-control *ngIf="paramDefine.type === 'radio'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
                <nz-radio-group
                  [(ngModel)]="advancedParams[i].paramValue"
                  [required]="paramDefine.required"
                  nzButtonStyle="solid"
                  [name]="paramDefine.field"
                  [id]="paramDefine.field"
                >
                  <label nz-radio-button [nzValue]="optionItem.value" *ngFor="let optionItem of paramDefine.options">
                    {{ optionItem.label }}
                  </label>
                </nz-radio-group>
              </nz-form-control>

              <nz-form-label
                *ngIf="paramDefine.type === 'key-value'"
                nzSpan="7"
                [nzRequired]="paramDefine.required"
                [nzFor]="paramDefine.field"
                >{{ paramDefine.name }}
              </nz-form-label>
              <nz-form-control *ngIf="paramDefine.type === 'key-value'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
                <app-key-value-input
                  [(value)]="advancedParams[i].paramValue"
                  [id]="paramDefine.field"
                  keyAlias="Header Name"
                  valueAlias="Header Value"
                ></app-key-value-input>
              </nz-form-control>
            </nz-form-item>
          </ng-container>
        </nz-collapse-panel>
      </nz-collapse>
      <ng-template #extraColHeader>
        <button style="top: -10px; margin-left: 40%" nz-button nzType="dashed" nz-tooltip [nzTooltipTitle]="'monitors.advanced.tip' | i18n">
          <span>{{ 'monitors.advanced' | i18n }}</span>
          <i nz-icon nzType="down-circle" nzTheme="outline"></i>
        </button>
      </ng-template>

      <nz-form-item>
        <nz-form-label nzSpan="7" nzFor="collector" [nzTooltipTitle]="'monitor.collector.tip' | i18n">
          {{ 'monitor.collector' | i18n }}
        </nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-select
            [(ngModel)]="collector"
            [nzDropdownMatchSelectWidth]="false"
            name="collector"
            id="collector"
            [nzCustomTemplate]="collectorTemplate"
          >
            <nz-option
              nzCustomContent
              [nzValue]="''"
              [nzLabel]="('monitor.collector.system.default' | i18n) + '-' + ('collector.mode.public' | i18n)"
            >
              <nz-tag nzColor="processing">{{ 'monitor.collector.system.default' | i18n }}</nz-tag>
              <nz-tag nzColor="success">{{ 'collector.mode.public' | i18n }}</nz-tag>
            </nz-option>
            <nz-option nzCustomContent *ngFor="let item of collectors" [nzValue]="item.name" [nzLabel]="item.name">
              <nz-tag [nzColor]="item.status == 0 ? 'processing' : 'error'">{{
                item.status == 0 ? ('monitor.collector.status.online' | i18n) : ('monitor.collector.status.offline' | i18n)
              }}</nz-tag>
              <span nz-icon nzType="bug" nzTheme="outline" style="margin-right: 8px"></span>
              <nz-tag nzColor="processing">{{ item.name }}</nz-tag>
              <nz-tag nzColor="processing">{{ item.ip }}</nz-tag>
              <nz-tag [nzColor]="item.mode == 'private' ? 'warning' : 'success'">
                {{ item.mode == 'private' ? ('collector.mode.private' | i18n) : ('collector.mode.public' | i18n) }}
              </nz-tag>
            </nz-option>
          </nz-select>
          <ng-template #collectorTemplate let-selected>
            <nz-tag nzColor="processing">{{ selected.nzLabel }}</nz-tag>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzSpan="7" nzFor="intervals" [nzTooltipTitle]="'monitor.intervals.tip' | i18n">
          {{ 'monitor.intervals' | i18n }}
        </nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-input-number
            [(ngModel)]="monitor.intervals"
            [nzMin]="monitor.app === 'push' ? 1 : 30"
            [nzMax]="604800"
            [nzStep]="monitor.app === 'push' ? 1 : 60"
            name="intervals"
            id="intervals"
          >
          </nz-input-number>
          <nz-tag style="margin-left: 6px">{{ 'common.time.unit.second' | i18n }}</nz-tag>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzSpan="7" nzFor="tags" [nzTooltipTitle]="'tag.bind.tip' | i18n">
          {{ 'tag.bind' | i18n }}
        </nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-tag
            *ngFor="let tag of monitor.tags; let i = index"
            [nzMode]="tag.type === 1 ? 'closeable' : 'default'"
            (nzOnClose)="onRemoveTag(tag)"
            [nzColor]="tag.color"
            style="margin-top: 4px"
          >
            {{ sliceTagName(tag) }}
          </nz-tag>
          <a (click)="onShowTagsModal()">
            <nz-tag style="margin-top: 4px">
              <i nz-icon nzType="plus"></i>
              {{ 'tag.new' | i18n }}
            </nz-tag>
          </a>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="description" [nzTooltipTitle]="'monitor.description.tip' | i18n">
          {{ 'monitor.description' | i18n }}
        </nz-form-label>
        <nz-form-control [nzSpan]="8">
          <nz-textarea-count [nzMaxCharacterCount]="100">
            <textarea [(ngModel)]="monitor.description" rows="3" nz-input name="description" id="description"></textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>

      <div nz-row>
        <div nz-col [nzXs]="{ span: 24 }" [nzLg]="{ span: 8, offset: 7 }" style="text-align: center">
          <button
            nz-button
            nzType="primary"
            type="submit"
            nz-tooltip
            [nzTooltipTitle]="'monitors.detect.tip' | i18n"
            (click)="onDetect(editForm.form)"
          >
            {{ 'common.button.detect' | i18n }}
          </button>
          <button nz-button nzType="primary" type="submit" (click)="onSubmit(editForm.form)"> {{ 'common.button.ok' | i18n }} </button>
          <button nz-button nzType="primary" type="reset" (click)="onCancel()"> {{ 'common.button.cancel' | i18n }} </button>
        </div>
      </div>
    </form>
  </div>
</nz-spin>

<!-- 选择TAG弹出框 -->
<nz-modal
  [(nzVisible)]="isManageModalVisible"
  [nzTitle]="'tag.bind' | i18n"
  (nzOnCancel)="onManageModalCancel()"
  (nzOnOk)="onManageModalOk()"
  nzMaskClosable="false"
  nzWidth="30%"
  [nzOkLoading]="isManageModalOkLoading"
>
  <div *nzModalContent class="-inner-content">
    <input
      style="margin-left: 5px; width: 50%; border-radius: 9px; text-align: center"
      nz-input
      type="text"
      [placeholder]="'tag.search' | i18n"
      nzSize="default"
      (keyup.enter)="loadTagsTable()"
      [(ngModel)]="tagSearch"
    />
    <button nz-button nzType="primary" routerLink="/setting/tags" style="margin-left: 5px; border-radius: 9px">
      <i nz-icon nzType="setting" nzTheme="outline"></i>
      {{ 'tag.setting' | i18n }}
    </button>
    <nz-table #smallTable nzSize="small" [nzData]="tags" [nzPageSize]="8" [nzLoading]="tagTableLoading">
      <thead>
        <tr>
          <th nzAlign="center" nzLeft nzWidth="4%" [(nzChecked)]="tagCheckedAll" (nzCheckedChange)="onAllChecked($event)"></th>
          <th nzAlign="left">{{ 'tag' | i18n }}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of smallTable.data">
          <td nzAlign="center" nzLeft [nzChecked]="checkedTags.has(data)" (nzCheckedChange)="onItemChecked(data, $event)"></td>
          <td nzAlign="left">
            <nz-tag *ngIf="data.tagValue == undefined || data.tagValue.trim() == ''" [nzColor]="data.color">{{ data.name }}</nz-tag>
            <nz-tag *ngIf="data.tagValue != undefined && data.tagValue.trim() != ''" [nzColor]="data.color">
              {{ data.name + ':' + data.tagValue }}
            </nz-tag>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</nz-modal>
